<template>
	<view class="chongzhi-page page">
		<div class="header">
			<p class="p-name">可用余额</p>
			<div>
				<span class="p-money-symbol">¥</span><span class="p-money">200</span>
			</div>
		</div>

		<div class="integral-change-content">
			<div class="p-tui">充值金额</div>
			<div class="f-r a-c input-box">
				<span style="margin-right: 10px;font-size: 24px;">¥</span>
				<u-input placeholder="请手动输入充值金额" v-model="money" ></u-input>
			</div>
		</div>
		<div class="submit" @click="open">确认充值</div>

		<u-action-sheet 
		@select="confirm"
		:actions="list" :title="title" :show="show" @close="show = false"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				list: [{
						name: '微信'
					},
					{
						name: '支付宝'
					}
				],
				title: '选择充值方式',
				show: false
			}
		},
		methods: {
			open() {
				if (!this.money) return uni.showToast({
					icon:'none',
					title:'请输入充值金额'
				})
				this.show = true
			},
			confirm() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.chongzhi-page {
		.integral-change-content {
			padding-left: 20px;
			background-color: #fff;

			.input-box {
				background-color: #fff;
				padding-bottom: 20px;
				height: 96rpx;

				.u-border {
					border: none !important;
				}
			}

			.p-tui {
				padding: 22px 0;
				font-size: 13px;
				font-weight: 400;
				color: #999;
			}
		}

		.header {
			height: 96px;
			background: #ff443b;
			padding-left: 16px;
			padding-top: 19px;

			.p-name {
				margin: 0;
				padding-bottom: 16px;
				font-size: 13px;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
			}

			.p-money-symbol {
				padding-right: 5px;
				font-size: 18px;
				font-weight: 700;
				color: #fff;
			}

			.p-money {
				font-size: 24px;
				font-weight: 700;
				color: #fff;
			}
		}
	}
</style>
